{% extends "base.html" %}
{% comment 'header' %}
# This file is part of opentaps Smart Energy Applications Suite (SEAS).

# opentaps Smart Energy Applications Suite (SEAS) is free software:
# you can redistribute it and/or modify
# it under the terms of the GNU General Public License as published by
# the Free Software Foundation, either version 3 of the License, or
# (at your option) any later version.

# opentaps Smart Energy Applications Suite (SEAS) is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU Lesser General Public License for more details.

# You should have received a copy of the GNU Lesser General Public License
# along with opentaps Smart Energy Applications Suite (SEAS).
# If not, see <https://www.gnu.org/licenses/>.
{% endcomment %}

{% load bootstrap4 %}
{% load django_tables2 %}
{% load static i18n %}
{% block title %}Topic Tag Rule Sets{% endblock %}

{% block content %}
{% url 'core:topictagruleset_export' as topictagruleset_export_url %}
{% url 'core:topictagruleset_import' as topictagruleset_import_url %}
{% url 'core:topictagruleset_create' as ruleset_create_url %}
<div class="container">

  {% include "core/_breadcrumbs.html" %}

  <div class="card mb-3">
    <div class="card-body" id="ruleset-list">
      <div class="alert alert-danger mt-3" role="alert" v-if="errors.error" v-cloak>
        ${ errors.error }
      </div>
      <div class="alert alert-success alert-dismissible fade show mt-3" role="alert" v-if="run_success" v-cloak>
        <div>Successfully ran on ${ run_success.updated } Topics.</div>
        <button type="button" class="close" aria-label="Close" v-on:click="run_success = false">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      {% load render_table from django_tables2 %}

      <form action="" method="get" class="form">
        <div class="row m-0">
          <div class="row p-0 m-0 mb-2 mr-sm-2 col-12 col-sm-auto order-1 order-sm-0">
            {% bootstrap_field filter.form.query form_group_class="form-group m-0 flex-grow-1" show_label=False placeholder='Search...' %}
            {% bootstrap_button '<i class="fa fa-filter"></i>' button_class='btn-outline-secondary ml-2' %}
          </div>
          <div class="m-0 mb-2 mr-0 p-0 col-auto text-right flex-grow-1 order-0 order-sm-1 d-flex flex-column flex-sm-row justify-content-end">
            {% bootstrap_button '<i class="fa fa-plus"></i> Add Rule Set' button_class='btn-primary mb-2 mb-sm-0 mr-sm-2' href=ruleset_create_url %}
            {% bootstrap_button '<i class="fa fa-upload"></i> Import' button_class='btn-primary mb-2 mb-sm-0 mr-sm-2' href=topictagruleset_import_url %}
            {% bootstrap_button '<i class="fa fa-download"></i> Export' button_class='btn-primary' href=topictagruleset_export_url %}
          </div>
        </div>
      </form>

      {% render_table table %}
    </div>
  </div>
</div>
<script>
(function() {
  {% load js_csrf_token from core_tags %}
  const CSRF_TOKEN = '{% js_csrf_token %}';

  new Vue({
    delimiters: ['${', '}'],
    el: '#ruleset-list',
    name: 'ruleset-list',
    data() {
      return {
        csrfmiddlewaretoken: CSRF_TOKEN,
        run_success: false,
        errors: false
      }
    },
    methods: {
      run_tag_ruleset(id) {
        return {
          okText: 'Proceed',
          ok: dialog => this.run_tag_ruleset_cb(dialog, id),
          message: 'This will run all the Rules in this Rule Set, this may take a while to complete.'
        }
      },
      run_tag_ruleset_cb(dialog, id) {
        console.log('run set', id)
        url = dutils.urls.resolve('topictagruleset_run', {id: id})
        this.run_success = false
        this.errors = false
        return axios.post(url, {}, {headers: {'X-CSRFToken': this.csrfmiddlewaretoken}})
            .then(x => x.data)
            .then(x => {
              console.log('run_tag_ruleset Done', x)
              if (x.success) {
                this.run_success = x
                dialog.close()
                return x
              } else {
                return Promise.reject(x.errors)
              }
            })
            .catch(err => {
              e = getResponseError(err)
              console.error(e, err)
              this.errors = e
              dialog.close()
            });
      },
      delete_tag_ruleset(id) {
        return {
          okText: 'Delete',
          ok: dialog => this.delete_tag_ruleset_cb(dialog, id),
          message: 'Are you sure? This will delete the Rule Set and ALL its rules.'
        }
      },
      delete_tag_ruleset_cb(dialog, id) {
        console.log('DELETE?', id)
        url = dutils.urls.resolve('topic_rules')
        return axios.delete(url, {data: {rule_set_id: id}, headers: {'X-CSRFToken': this.csrfmiddlewaretoken}})
            .then(x => x.data)
            .then(x => {
              console.log('delete_tag_ruleset Done', x)
              if (x.success) {
                dialog.close()
                document.getElementById('topicruleset_'+id).remove()
                return x
              } else {
                return Promise.reject(x.errors)
              }
            })
            .catch(err => {
              e = getResponseError(err)
              console.error(e, err)
              this.errors = e
              dialog.close()
            });
      },
    }
  })
})();
</script>
{% endblock content %}
